<template>
  <ContentWrap>
    <!-- 标签页 -->
    <el-tabs v-model="activeTab">
      <el-tab-pane label="基本信息" name="base">
        <!-- 基础信息部分 -->
        <el-card class="mb-4">
          <template #header>基础信息</template>
          <el-row :gutter="20" class="mb-2">
            <el-col :span="12">物流公司名称：{{ company.name }}</el-col>
            <el-col :span="12">物流公司分类：{{ company.category }}</el-col>
          </el-row>
          <el-row :gutter="20" class="mb-2">
            <el-col :span="12">经营范围：{{ company.businessScope }}</el-col>
            <el-col :span="12">公司规模：{{ company.scale }}</el-col>
          </el-row>
          <el-row :gutter="20" class="mb-2">
            <el-col :span="12">公司电话：{{ company.phone }}</el-col>
            <el-col :span="12">公司网站：{{ company.website }}</el-col>
          </el-row>
          <el-row :gutter="20" class="mb-2">
            <el-col :span="12">公司邮编：{{ company.postcode }}</el-col>
            <el-col :span="12">公司传真：{{ company.fax }}</el-col>
          </el-row>
          <el-row>
            <el-col :span="24">备注：{{ company.remark }}</el-col>
          </el-row>
          <div class="mt-4 text-right">
            <el-button type="primary" @click="onEdit">编辑</el-button>
          </div>
        </el-card>

        <!-- 联系人表格 -->
        <el-card>
          <template #header>联系人</template>
          <el-table :data="company.contacts" border>
            <el-table-column prop="name" label="联系人" />
            <el-table-column prop="gender" label="性别" />
            <el-table-column prop="job" label="职务" />
            <el-table-column prop="email" label="邮箱" />
            <el-table-column prop="tel" label="座机" />
            <el-table-column prop="mobile" label="移动电话" />
            <el-table-column prop="facebook" label="Facebook" />
            <el-table-column prop="ins" label="ins" />
            <el-table-column prop="tiktok" label="TIKTOK" />
            <el-table-column prop="youtube" label="Youtube" />
            <el-table-column prop="linkedin" label="Linkedin" />
            <el-table-column prop="备注" label="remar" />
          </el-table>
          <div class="mt-4 text-right">
            <el-button @click="onCancel">取消</el-button>
            <el-button type="primary" @click="onSave">保存</el-button>
          </div>
        </el-card>
      </el-tab-pane>
      <el-tab-pane label="账户信息" name="account" />
      <el-tab-pane label="付款记录" name="payment" />
    </el-tabs>
  </ContentWrap>
</template>

<script setup>
import { ref } from 'vue'
//**********************
import { useRoute } from 'vue-router'
import { onMounted } from 'vue'

const route = useRoute()
const id = route.query.id;
console.log('物流公司ID:', id);


onMounted(() => {
  const companyId = route.query.id
  console.log("接收到的公司 ID：", companyId)
  // 可以调用 API 获取联系人信息
})


// 


const activeTab = ref('base')

const company = ref({
  name: 'FedEx（联邦快递）',
  category: '国际小包',
  businessScope: '',
  scale: '',
  phone: '',
  website: '',
  postcode: '',
  fax: '',
  remark: '',
  contacts: [
    {
      name: 'ALok Sinha',
      gender: '男',
      job: '',
      email: '1984676332@163.com',
      tel: '+71 835478652',
      mobile: '',
      facebook: '',
      ins: '',
      tiktok: '',
      youtube: ''
    },
    {
      name: 'Maya Tripa',
      gender: '女',
      job: '',
      email: '',
      tel: '',
      mobile: '+71 83956312',
      facebook: '',
      ins: '',
      tiktok: '',
      youtube: ''
    }
  ]
})

const onEdit = () => {
  console.log('点击编辑')
}

const onCancel = () => {
  console.log('取消')
}

const onSave = () => {
  console.log('保存')
}
</script>

<style scoped>
.mb-2 {
  margin-bottom: 12px;
}
.mb-4 {
  margin-bottom: 20px;
}
</style>
